<template>
  <el-dialog
    :visible="visible"
    @close="$emit('update:visible', false)"
    width="800px"
    center
    title="获奖名单"
    class="c-Result"
    :show-close="false"
    :append-to-body="true"
  >
    <div class="container">
      <div v-for="(item, index) in resultList" :key="index" class="list">
        <div class="title">{{ item.name }}</div>
        <div class="empyt" v-if="item.value.length == 0">暂未抽奖</div>
        <div
          class="item"
          v-for="(data, j) in item.value"
          :key="j"
          :data-res="data"
        >
          <div class="left">
            <span class="text">恭喜</span>
            <span>{{ data }}号</span>
          </div>
          <div class="right">
            获得
            <span class="red">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <el-button class="download" icon="el-icon-download" @click="exportToExcel"
      >下载表格</el-button
    >
  </el-dialog>
</template>
<script>
import { conversionCategoryName, getDomData } from '@/helper/index';
export default {
  name: 'CResult',
  props: {
    visible: Boolean
  },
  computed: {
    result: {
      get() {
        return this.$store.state.result;
      },
      set(val) {
        this.$store.commit('setResult', val);
      }
    },
    resultList() {
      const list = [];
      for (const key in this.result) {
        if (this.result.hasOwnProperty(key)) {
          const element = this.result[key];
          let name = conversionCategoryName(key);
          list.push({
            label: key,
            name,
            value: element
          });
        }
      }
      return list;
    }
  },
  methods: {
    // 导出表格
    exportToExcel() {
      // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
      let str = '';
      let resultList = [];
      for (let i = 0; i < this.resultList.length; i++) {
        resultList.push([]);
        str += `${this.resultList[i].name},`;
        for (let j of this.resultList[i].value) {
          resultList[i].push(j);
        }
      }

      str += '\n';

      for (let i = 0; i < resultList.length; i++) {
        for (let item of resultList[i]) {
          str += `${item + '\t'},`;
        }
        str += '\n';
      }

      // encodeURIComponent解决中文乱码
      let uri = 'data:text/xlsx;charset=utf-8,\ufeff' + encodeURIComponent(str);
      // 通过创建a标签实现
      let link = document.createElement('a');
      link.href = uri;
      // 对下载的文件命名
      link.download = '获奖名单.xlsx';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    deleteRes(event, row) {
      const Index = getDomData(event.target, 'res');
      if (!Index) {
        return;
      }
      this.$confirm('此操作将移除该中奖号码，确认删除?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (Index) {
            const result = this.result;
            result[row.label] = this.result[row.label].filter(
              item => item !== Number(Index)
            );
            this.result = result;
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    }
  }
};
</script>
<style lang="scss">
.c-Result {
  .el-dialog {
    padding: 0 0 20px;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(0deg, #24cac2, #1dd7bc);
    box-shadow: 0px 35px 50px 0px rgba(223, 255, 252, 0.35);
  }
  .el-dialog__title {
    color: #fff;
    width: 80%;
    line-height: 1;
    padding: 12px 0;
    margin: 0 auto;
    display: block;
    font-size: 34px;
    background: #009f9e;
    border-radius: 14px;
  }
  .el-dialog__body {
    width: 90%;
    overflow: hidden;
    margin: 20px auto;
    background: #ffffff;
    border-radius: 14px;
    padding: 0 !important;
    box-shadow: 0px 6px 0px 0px rgba(0, 159, 158, 0.53),
      0px 7px 66px 0px #d1fffb;
    .container {
      width: 102%;
      padding: 20px 50px;
      max-height: 50vh;
      overflow-y: auto;
      box-sizing: border-box;
      .title {
        color: #fff;
        padding: 5px 0;
        font-size: 34px;
        margin: 0 0 10px;
        text-align: center;
        border-radius: 6px;
        background: linear-gradient(0deg, #24cac2, #1dd7bc);
        box-shadow: 0px 35px 50px 0px rgba(223, 255, 252, 0.35);
      }
      .item {
        color: #333;
        overflow: hidden;
        font-size: 32px;
        margin: 0 0 18px;
        span {
        }
        .red {
          color: #fa4727;
        }
        .left {
          width: 50%;
          float: left;
          padding-right: 10px;
          box-sizing: border-box;
        }
        .right {
          width: 50%;
          float: right;
        }
        .text {
          width: 80px;
          display: inline-block;
        }
      }
      .empyt {
        color: #999;
        margin: 10px 0;
        font-size: 24px;
        text-align: center;
      }
    }
    .download {
      color: #fff;
      display: block;
	  font-size: 18px;
      margin: 15px auto;
      background-color: #009f9e;
    }
  }
}
</style>
